import React from 'react'
import ReactDOM from 'react-dom'   
import './css/Chat.css' 
 import myicon from './assets/Chat/my.png'
import othericon from './assets/Chat/other.png'

class Chat extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            legend : false , 
        };
    }
    chatConfig={
        my:{
            icon:myicon,
            iconStyle:{width:45,height:45,      position: 'absolute',   top: 0,  borderRadius: '50px',    right: '-60px',},
            tmStyle:{   position: 'absolute',   top: '-20px',   right:0,color:'#949090',  'white-space': 'nowrap'}
        },
        other:{
            icon:othericon,
            iconStyle:{width:45,height:45,      position: 'absolute',   top: 0,  borderRadius: '50px',    left: '-60px',},
            tmStyle:{   position: 'absolute',   top: '-20px',   left: 0,color:'#949090',   'white-space': 'nowrap'}            
        },
    }
 
    chatData=[
         {
            icon:'other',
            word:'好的，谢谢',
            name:'张三',
            id:0,
            tm:'18:07',
            att_list:[
                {aid: 2845, filetype: ".png", filepath: "UploadFile/CommonReport/201710/20171031145938934.png",filetile:"investigate",filetype:".png"} 
             ]
        }, {
            icon:'my',
            word:'不客气',
             name:'李四',
            id:0,
            tm:'18:07',
            att_list:[] 
        }, {
            icon:'my',
            word:'不客气',
             name:'李四',
            id:0,
            tm:'18:07',
            att_list:[] 
        }
    ]
     componentWillMount = () => {
 
    } 
    componentDidMount = () => { 
    } 

 
   ChatClick = (item) => {
        console.log(item)
  }
 
    render() {
      
        return (
            <div  className="Chat">
                 <ul className="chat-thread">
                    {
                        this.chatData.map((item,i)=>{
                             item.name =item.icon=='my'?'':item.name;
                             let arrshow = item.att_list.length>0? item.att_list:[];
                             if( item.att_list.length>0){
                                 let filetype=item.att_list[0].filetype;
                                 if(filetype=='.png' ||filetype=='.PNG'||filetype=='.GIF'||filetype=='.gif'){
                                       return (
                                        <li className={item.icon} >
                                            <p style={this.chatConfig[item.icon].tmStyle}>{item.name } {item.tm}</p>
                                            <img src={''+this.chatConfig[item.icon+''].icon} style={this.chatConfig[item.icon].iconStyle} />  
                                            <a  href='#'  onClick={()=>this.popupFn(item.att_list[0].filepath)}>
                                                {item.att_list[0].filetile}
                                            </a> 
                                        </li>
                                    )

                                 }else{
                                     return (
                                        <li className={item.icon} >
                                            <p style={this.chatConfig[item.icon].tmStyle}>{item.name } {item.tm}</p>
                                            <img src={''+this.chatConfig[item.icon+''].icon} style={this.chatConfig[item.icon].iconStyle} /> 
                                            <a href='#'   download ={"/"+ item.att_list[0].filepath }  >
                                              {item.att_list[0].filetile}
                                            </a>
                                        </li>
                                    )

                                 }
                                       
                             }else{
                                   return (
                                        <li className={item.icon} >
                                            <p style={this.chatConfig[item.icon].tmStyle}>{item.name } {item.tm}</p>
                                            <img src={''+this.chatConfig[item.icon+''].icon} style={this.chatConfig[item.icon].iconStyle} />
                                            {item.word}
                                        </li>
                                    )
                             }
                          
                        })
                    }
                </ul>
            </div>
        )
    }
} 
export default Chat 